<script>
export default {
  name: 'DTabs',
  props: {
    defaultActiveKey: {
      type: String
    },
    activeKey: {
      type: String
    },
    tabBarGutter: {
      type: Number,
      default: null
    },
    size: {
      type: String,
      default: 'default'
    }
  },
  methods: {
    onChange(key) {
      this.$emit('change', key);
    },
    onTabClick(key) {
      this.$emit('tabClick', key);
    }
  },
  render() {
    const props = {};
    if (this.defaultActiveKey) {
      props.defaultActiveKey = this.defaultActiveKey;
    }
    if (this.activeKey) {
      props.activeKey = this.activeKey;
    }
    if (this.tabBarGutter !== null) {
      props.tabBarGutter = this.tabBarGutter;
    }
    if (this.size) {
      props.size = this.size;
    }
    const on = {
      change: this.onChange,
      tabClick: this.onTabClick
    };
    return (
      <a-tabs props={props} on={on} scopedSlots={this.$scopedSlots}>
        {this.$slots.default}
      </a-tabs>
    );
  }
};
</script>

<style lang="scss" scoped></style>
